<template>
  <div class="col p-5">
    <draggable
      class="container-fluid h-100 border"
      v-if="isarr"
      group="name"
      v-model="getarr"
    >
      <Hello
        class="col"
        v-for="(v, i) in getarr"
        :key="i"
        v-bind="{ arr: v, index: i, setarr: _setarr }"
      ></Hello>
    </draggable>
    <div v-else>{{ index }}</div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import Hello from "./Hello.vue";
import uarr from "./utilarr";

export default {
  props: ["arr", "index", "setarr"],
  components: {
    draggable,
    Hello,
  },
  methods: {
    _setarr(key, brr) {
      if (typeof brr === "string") {
        brr = ["", ""];
      }
      const arr = JSON.parse(JSON.stringify(this.arr));
      arr[key] = brr;
      this.setarr(this.index, arr);
    },
  },
  computed: {
    classname() {
      return 666;
    },
    isarr() {
      const t = Array.isArray(this.arr);
      return t;
    },
    getarr: {
      get() {
        return this.arr;
      },
      set(brr) {
        let index = brr.findIndex((v, k) => {
          if (typeof v === "object") {
            const _v = JSON.stringify(v);
            const _brr = JSON.stringify(this.arr[k]);
            return _v !== _brr;
          }
        });
        if (index === -1) index = 0;
        if (index === this.arr.length) index = this.arr.length - 1;
        const arr = uarr(brr, this.arr, index, "draggable");
        this.setarr(this.index, arr);
      },
    },
  },
};
</script>